<template>
  <div>
 <!-- 添加新行表单（以弹出框显示） -->
 <el-button type="primary" @click="showAddForm = true">添加</el-button>

<el-dialog
title="添加新行"
v-model="showAddForm"
width="50%"
:before-close="handleCancel"
>
<el-form ref="addForm" :model="formModel" label-position="left" label-width="80px">
  <el-row>
    <el-col v-for="(column, index) in columns" :key="index" :sm="{ span: 24 / columns.length }">
      <el-form-item :label="column.label">
        <el-input v-model="formModel[column.prop]" :placeholder="column.prop"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

<div slot="footer" class="dialog-footer">
  <el-button @click="handleCancel">取消</el-button>
  <el-button type="primary" @click="handleAddSubmit">保存</el-button>
</div>
</el-dialog>
<!-- 添加成功提示 -->
<el-message
  v-if="showSuccessMessage"
  type="success"
  :duration="2000"

>
  添加成功！
</el-message>
      <!-- table主体 -->
      <el-table :data="tableData" style="width: 100%">
          <template v-for="(column, index) in columns" :key="index">
              <el-table-column :prop="column.prop" :label="column.label" :width="column.width || ''"></el-table-column>
          </template>
      </el-table>
  
    
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const props = defineProps({
  showAddForm: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array,
    required: true
  },
  onSubmit: {
    type: Function,
    required: true
  },
  onCancel: {
    type: Function,
    required: true
  }
});

const emit = defineEmits(['update:showAddForm']);

const formModel = ref({});

const handleSubmit = () => {
  props.onSubmit(formModel.value);
  emit('update:showAddForm', false);
  formModel.value = {}; // 清空表单
};

const handleCancel = () => {
  emit('update:showAddForm', false);
  props.onCancel();
  formModel.value = {}; // 清空表单
};

const handleClose = () => {
  handleCancel(); // 确保关闭时调用取消逻辑
};
</script>